import React, { useState, useEffect } from 'react'
import {useHistory } from 'react-router-dom'
import { useObserver } from 'mobx-react-lite'
import useStore from '../context/useStore'
import './search.scss' 
const Search: React.FC = () => {
  let { search } = useStore()
  let [searchText, setSearchText] = useState<string>('');
  let history = useHistory()
  let [flag, setFlag] = useState<boolean>(false)
  let [remflag,setRemflag]=useState<boolean>(false)
  //返回上一页
  function back() {
    history.goBack()
  }
  useEffect(() => {
    let arr=JSON.parse(localStorage.getItem("arr")) 
    if (arr) {
      setFlag(true)
    } else {
      setFlag(false)
    }
  },[])
  //热门搜索
  useEffect(() => {
    search.getHotList()
  }, [searchText,search])
  //历史搜索
  useEffect(() => {
    search.getHistoryList();
}, [flag])
  //关键字搜索
  useEffect(() => {
    search.getSearchTips(searchText)
  }, [searchText])
  //搜索按钮
  function searchBtn() {
    //setFlag(true)
    let arr = JSON.parse(localStorage.getItem("arr")) || [];
    console.log(arr)
    arr.push(searchText)
    localStorage.setItem("arr",JSON.stringify(arr))
    history.push("/searchDetail")
    search.getSearch(searchText)
  }
  //搜索框事件
  function iptchang(e:any){
    setSearchText((e.target as any).value)
    
  }
  //清除历史记录
  function removeOld() {
    localStorage.removeItem('arr')
    search.getHistoryList();
    setFlag(false)
  }
  return useObserver(() =>
    <div className="Search">
      <div className="heads">
          <span onClick={back}><svg  className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1864" width="20" height="20"><path d="M294.13376 512c0-13.70112 5.23264-27.40224 15.6672-37.84704l328.704-328.69376c20.91008-20.91008 54.80448-20.91008 75.70432 0 20.89984 20.89984 20.89984 54.79424 0 75.70432L423.36256 512l290.83648 290.83648c20.89984 20.89984 20.89984 54.80448 0 75.70432-20.89984 20.91008-54.79424 20.91008-75.70432 0l-328.704-328.69376C299.35616 539.40224 294.13376 525.70112 294.13376 512z" p-id="1865"></path></svg></span>
          <h3>搜索</h3>
      </div>
      <div className="search_sou">
        <div className="search_ipt">
          <input type="text" value={searchText} placeholder="搜索你想知道的一切排名~" onChange={iptchang} />
          {/* onChange={e => setSearchText(e.target.value)}  */}
        </div>
        <span onClick={searchBtn}>搜索</span>
      </div>
      {/* 关键词提示 */}
      <section  className="gjz">
        <div className='size'>搜索"{searchText}"</div>
          {
            search.searchTipsList.map((item,index) => {
              return (
                <div  key={index}>
                 <p><svg  className="icon" viewBox="0 0 1298 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2558" width="20" height="20"><path d="M707.960217 258.005c24.43 25.305 43.93 55.49 58.505 90.56 14.57 35.07 21.86 71.85 21.86 110.315 0 38.475-7.29 75.245-21.86 110.315-14.575 35.07-34.075 65.255-58.505 90.56-24.435 25.305-53.58 45.5-87.44 60.595-33.86 15.095-69.37 22.64-106.51 22.64-37.15 0-72.65-7.545-106.51-22.64s-63.005-35.29-87.44-60.595c-24.43-25.305-43.93-55.49-58.505-90.56-14.57-35.07-21.86-71.84-21.86-110.315 0-38.465 7.29-75.245 21.86-110.315 14.575-35.07 34.075-65.255 58.505-90.56 24.435-25.3 53.58-45.5 87.44-60.595C441.360217 182.32 476.860217 174.77 514.010217 174.77c37.14 0 72.65 7.55 106.51 22.64 33.86 15.095 63.005 35.295 87.44 60.595zM679.240217 163.675C628.805217 133.195 573.730217 117.95 514.010217 117.95c-59.725 0-114.8 15.245-165.23 45.725C298.345217 194.16 258.410217 235.52 228.980217 287.75 199.550217 339.985 184.835217 397.03 184.835217 458.88c0 61.86 14.715 118.905 44.145 171.135 29.43 52.235 69.365 93.595 119.8 124.075 50.43 30.475 105.505 45.72 165.23 45.72 59.72 0 114.795-15.245 165.23-45.72 50.43-30.48 90.365-71.84 119.8-124.075 29.425-52.23 44.145-109.275 44.145-171.135 0-61.85-14.72-118.895-44.145-171.13-29.435-52.23-69.37-93.59-119.8-124.075z" p-id="2559"></path><path d="M735.895217 678.995l199.12 199.12c10.755 10.755 10.755 28.14 0 38.89-10.75 10.755-28.135 10.755-38.89 0l-199.12-199.12c-10.755-10.755-10.755-28.14 0-38.89 10.75-10.755 28.135-10.755 38.89 0z" p-id="2560"></path></svg>{item}</p>
                </div>
              )
            })}
      </section>
      {/* 历史搜索 */}
      <div className="search_history">
        {flag&&<div>
          <div className="s_h_head">
            <h3>历史搜索</h3>
            <span><svg onClick={removeOld} className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1122" width="20" height="20"><path d="M574.577778 739.555556V381.155556c0-39.822222 62.577778-39.822222 62.577778 0V739.555556c5.688889 39.822222-62.577778 39.822222-62.577778 0z m-193.422222 0V381.155556c0-39.822222 62.577778-39.822222 62.577777 0V739.555556c5.688889 39.822222-62.577778 39.822222-62.577777 0z m551.822222-517.688889h-164.977778V159.288889c0-51.2-45.511111-96.711111-96.711111-96.711111H347.022222c-28.444444 0-51.2 11.377778-68.266666 28.444444-17.066667 17.066667-28.444444 45.511111-28.444445 68.266667v62.577778H85.333333C45.511111 221.866667 45.511111 284.444444 85.333333 284.444444h847.644445c45.511111 0 45.511111-62.577778 0-62.577777zM318.577778 153.6c0-17.066667 17.066667-34.133333 34.133333-34.133333h324.266667c17.066667 0 34.133333 11.377778 34.133333 34.133333v62.577778H318.577778V153.6zM739.555556 967.111111H284.444444c-28.444444 0-51.2-11.377778-68.266666-28.444444-17.066667-17.066667-28.444444-45.511111-28.444445-68.266667V381.155556c0-17.066667 17.066667-34.133333 34.133334-34.133334s34.133333 11.377778 34.133333 34.133334v489.244444c0 17.066667 17.066667 34.133333 34.133333 34.133333h455.111111c17.066667 0 34.133333-17.066667 34.133334-34.133333V386.844444c0-39.822222 62.577778-39.822222 62.577778 0v489.244445c-5.688889 45.511111-45.511111 91.022222-102.4 91.022222z" fill="#999999" p-id="1123"></path></svg></span>
          </div>
          <div className="s_h_con">
            {
              search.historyList&&search.historyList.map((item,index) => {
                return (
                  <span key={index}>{item}</span>
                )
              })
            }
          </div>
        </div>}
      </div>
      {/* 热门搜索 */}
      <div className="search_hot">
        <h3>热门搜索</h3>
        <div className="s_hot_con">
          {
              search.hotList.map((item, index) => {
                return (
                  <div key={index}>
                    <span> {index+1}、</span>
                    {item}
                  </div>
                )
              })
          }
          </div>
      </div>
    </div>
  )
   
}
export default Search